<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>首页</title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/index.css">
	<link rel="stylesheet" type="text/css" href="./lib/swiper/css/swiper-bundle.min.css" />
	<style>
		* {
			padding: 0;
			margin: 0;
		}
	</style>
</head>

<body>
	<header>
		<img class="list" src="./img/index/listico.png" alt="">
		<span class="title">首页</span>
		<a href="./goods.html"><img class="search" src="./img/index/searchico.png" alt=""></a>
	</header>
	<div class="banner_nav">

		<div class="swiper banner-box banner">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img class="inner" src="./img/index/banner.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img class="inner" src="./img/index/banner.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img class="inner" src="./img/index/banner.jpg" alt="">
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>

		</div>


		<ul class="subnav">
			<li>
				<a href="#">
					<img src="./img/index/item1.png" alt="">
					<div class="nav_name">新品/热销</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/item2.png" alt="">
					<div class="nav_name">超值拼团</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/item3.png" alt="">
					<div class="nav_name">新人福利</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/item4.png" alt="">
					<div class="nav_name">时尚动态</div>
				</a>
			</li>
		</ul>
	</div>
	<div class="products">
		<div class="head">
			<div class="title">精品热卖</div>
			<div class="line"></div>
			<div class="en">SALE</div>
		</div>
		<ul>
			<li>
				<a href="#">
					<img src="./img/index/product1.jpg" alt="">
					<div class="name">英式经典三防女式长风衣</div>
					<div class="price">￥599</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/product2.jpg" alt="">
					<div class="name">超轻至暖铜氨丝白鹅绒被</div>
					<div class="price">￥999</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/product3.jpg" alt="">
					<div class="name">羊毛混纺经典长款大衣</div>
					<div class="price">￥1299</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/product4.jpg" alt="">
					<div class="name">英式经典三防女式长风衣</div>
					<div class="price">￥599</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/product5.jpg" alt="">
					<div class="name">超轻至暖铜氨丝白鹅绒被</div>
					<div class="price">￥999</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/product6.jpg" alt="">
					<div class="name">羊毛混纺经典长款大衣</div>
					<div class="price">￥1299</div>
				</a>
			</li>
		</ul>
	</div>
	<div class="sproducts">
		<div class="head">
			<div class="title">精选优品</div>
			<div class="line"></div>
			<div class="en">SELECTION</div>
		</div>
		<ul>
			<li>
				<a href="#">
					<img src="./img/index/sproduct1.jpg" alt="">
					<div class="name_price">
						<div class="name">本家HOME</div>
						<div class="price">29.9元起</div>
					</div>
					<div class="introduce">每满100立减20元</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/sproduct1.jpg" alt="">
					<div class="name_price">
						<div class="name">本家HOME</div>
						<div class="price">29.9元起</div>
					</div>
					<div class="introduce">每满100立减20元</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/sproduct1.jpg" alt="">
					<div class="name_price">
						<div class="name">本家HOME</div>
						<div class="price">29.9元起</div>
					</div>
					<div class="introduce">每满100立减20元</div>
				</a>
			</li>
		</ul>
	</div>
	<div class="goods">
		<div class="head">
			<div class="title">好物推荐</div>
			<div class="line"></div>
			<div class="en">RECOMMEND</div>
		</div>
		<ul>
			<li>
				<a href="#">
					<img src="./img/index/gthing1.jpg" alt="">
					<div class="name">狐步小吊灯</div>
					<div class="introduce">曼妙裙摆 任意空间的光线舞者</div>
					<div class="price">￥469</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/gthing2.jpg" alt="">
					<div class="name">折简餐具组|碗套装</div>
					<div class="introduce">国画四色 诠释最美器具</div>
					<div class="price">￥999</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/gthing3.jpg" alt="">
					<div class="name">竹枝抱枕</div>
					<div class="introduce">上百竹枝首尾相依 静生生物</div>
					<div class="price">￥1299</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/gthing4.jpg" alt="">
					<div class="name">澎湃声波牙刷 Pro</div>
					<div class="introduce">一件能明显提升幸福感的小物件</div>
					<div class="price">￥599</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/gthing1.jpg" alt="">
					<div class="name">狐步小吊灯</div>
					<div class="introduce">曼妙裙摆 任意空间的光线舞者</div>
					<div class="price">￥469</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/gthing2.jpg" alt="">
					<div class="name">折简餐具组|碗套装</div>
					<div class="introduce">国画四色 诠释最美器具</div>
					<div class="price">￥999</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/gthing3.jpg" alt="">
					<div class="name">竹枝抱枕</div>
					<div class="introduce">上百竹枝首尾相依 静生生物</div>
					<div class="price">￥1299</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/index/gthing4.jpg" alt="">
					<div class="name">澎湃声波牙刷 Pro</div>
					<div class="introduce">一件能明显提升幸福感的小物件</div>
					<div class="price">￥599</div>
				</a>
			</li>
		</ul>
	</div>
	<nav>
		<ul class="nav">
			<li>
				<a href="./index.html">
					<img src="./img/index/nav1s.png" alt="">
					<div class="name">首页</div>
				</a>
			</li>
			<li>
				<a href="./preferred.html">
					<img src="./img/index/nav2.png" alt="">
					<div class="name">优选</div>
				</a>
			</li>
			<li>
				<a href="./category.html">
					<img src="./img/index/nav3.png" alt="">
					<div class="name">分类</div>
				</a>
			</li>
			<li>
				<a href="./cart.html">
					<img src="./img/index/nav4.png" alt="">
					<div class="name">购物车</div>
				</a>
			</li>
			<li>
				<a href="./user.html">
					<img src="./img/index/nav5.png" alt="">
					<div class="name">我的</div>
				</a>
			</li>
		</ul>
	</nav>
	<div class="to_top"><img src="./img/index/top.png" alt=""></div>
	<script src="./lib/swiper/js/swiper-bundle.min.js"></script>
	<script>
		var mySwiper = new Swiper('.banner-box', {
			loop: true, // 循环模式选项
			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
			},

			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			on: {
				init: function (swiper) {
					slide = this.slides.eq(0);
					slide.addClass('ani-slide');
				},
				transitionStart: function () {
					for (i = 0; i < this.slides.length; i++) {
						slide = this.slides.eq(i);
						slide.removeClass('ani-slide');
					}
				},
				transitionEnd: function () {
					slide = this.slides.eq(this.activeIndex);
					slide.addClass('ani-slide');

				},
			}
		});
	</script>
</body>

</html>